<template>
  <div class="settings-container">
    <div class="app-container">
      <PageTools>
        <template #left>
          <span>共记录条数:{{ total }}条</span>
        </template>
        <template #right>
          <el-button type="warning" v-allow="'import_excel'"
            >导入Excel</el-button
          >
          <el-button
            type="danger"
            v-allow="'export_excel'"
            @click="exportToExcel"
            >导出Excel</el-button
          >
          <el-button type="primary" v-allow="'add'" @click="showDialog = true"
            >新增员工</el-button
          >
        </template>
      </PageTools>
      <el-card style="margin-top: 10px">
        <!-- 在父标签中假:default-sort={'prop:'那个排序',order:'怎么排序'} -->
        <el-table
          border
          :data="list"
          :default-sort="{ prop: 'timeOfEntry', order: 'descending' }"
        >
          <el-table-column label="序号" type="index" />
          <el-table-column label="姓名" prop="username" />
          <el-table-column label="用户头像">
            <template #default="{ row }">
              <img
                @click="showCode(row.staffPhoto)"
                :src="row.staffPhoto"
                alt=""
                width="42px"
              />
            </template>
          </el-table-column>
          <el-table-column label="工号" prop="workNumber" sortable />
          <el-table-column label="聘用形式">
            <template #default="{ row }">
              {{ formatHireType(row.formOfEmployment) }}
            </template>
          </el-table-column>
          <el-table-column label="部门" prop="departmentName" />
          <!-- sortable表格排序 -->
          <el-table-column label="入职时间" prop="timeOfEntry" sortable>
            <!-- <template #default="{ row }">
              {{ formatTime(row.timeOfEntry) }}
            </template> -->
          </el-table-column>
          <!-- <el-table-column label="账户状态" /> -->
          <el-table-column label="操作" width="280">
            <template #default="{ row }">
              <!-- 路由传参 -->
              <!-- <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail?id=${row.id}`)"
                >查看</el-button
              > -->
              <!-- 路径传参 -->
              <el-button
                type="text"
                size="small"
                @click="$router.push(`/employees/detail/${row.id}`)"
                >查看</el-button
              >
              <el-button type="text" size="small" @click="hAssign(row.id)"
                >分配角色</el-button
              >
              <el-button type="text" size="small" @click="hDel(row.id)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row
          type="flex"
          justify="center"
          align="middle"
          style="height: 60px"
        >
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page"
            :page-sizes="[2, 6, 8, 10]"
            :page-size="size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </el-row>
      </el-card>
    </div>
    <!-- el-dialog弹层 -->
    <el-dialog title="新增或编辑" :visible.sync="showDialog" @close="hClose">
      <addOrEdit @success="hSuccess" ref="myEmp"></addOrEdit>
    </el-dialog>
    <!-- 新增角色权限的弹层 -->
    <el-dialog title="新增角色权限的弹层" :visible.sync="assignShowlosgin">
      <assignRole
        :currentId="currentId"
        @success="aSuccess"
        v-if="assignShowlosgin"
      ></assignRole>
    </el-dialog>
    <!-- 二维码 -->
    <el-dialog title="二维码" :visible.sync="showCodeDialog">
      <el-row type="flex" justify="center">
        <canvas ref="myCanvas" />
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
//
import QrCode from 'qrcode'
import dayjs from 'dayjs'
// 导入编辑和新增的组件
import addOrEdit from "@/views/settings(公司设置)/empDialog(员工的编辑和添加).vue"
// 4.导入角色权限的组件
import assignRole from '@/views/settings(公司设置)/assignRole(分配角色的Dialog).vue'
// 导入获取员工接口,删除员工接口
import { getEmployeeList, delEmployee } from '@/api/employees(员工)'
// 导入excel导出格式化的数据
import { formatToExcel } from '@/utils/index(自定义功能函数)'
// 导入枚举文件
import employeesEnum from '@/constant(枚举)/employees(员工的聘用方式).js'
//{id: 1,value: '正式'},{id: 2,value: '非正式'} ---> {1:'正式',2:'非正式'}
//创建一个空变量
const hireType = {}
//然后就转化 这是使用forEach的方式
employeesEnum.hireType.forEach(item => {
  hireType[item.id] = item.value
})
// 使用reduce方式
// employeesEnum.hireType.reduce((acc, item) => {
//   acc[item.id] = item.value
//   return acc
// }, {})

export default {
  // (0) 注册
  components: {
    addOrEdit,
    assignRole
  },
  // (1)数据
  data () {
    return {
      //1.当前页
      page: 1,
      //2.当前页显示的条数
      size: 2,
      //3.获取获取到的员工数据
      list: [],
      //4.总的记录条数
      total: 0,
      //5.是否显示弹层
      showDialog: false,
      //6.控制修改角色权限的弹层显示隐藏
      assignShowlosgin: false,
      //7.当前员工的id
      currentId: '',
      //8.二维码弹层
      showCodeDialog: false
    }
  },
  // (2)进入页面就渲染的
  created () {
    //1.执行获取员工函数
    this.loadEmployeeList()
  },
  // (3)事件
  methods: {
    //1.获取员工函数
    async loadEmployeeList () {
      try {
        let res = await getEmployeeList(this.page, this.size)
        this.list = res.data.rows
        this.total = res.data.total
      } catch (error) {
        console.log(error)
      }
    },
    //2.改变每页条数
    handleSizeChange (val) {
      //当前页为1
      this.page = 1
      //当前显示的条数
      this.size = val
      //刷新页面
      this.loadEmployeeList()
    },
    //3.改变每页显示的条数
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      //当前页为val
      this.page = val
      //刷新页面
      this.loadEmployeeList()
    },
    // 4.枚举员工的是否非正式
    formatHireType (value) {
      // (1) 使用find但性能低原因是需要执行多次函数和遍历
      // const obj = employeesEnum.hireType.find(item => item.id == value)
      // return obj ? obj.value : '未知'
      // (2) 使用数据转化将数据转变一下
      return hireType[value] || '未知'
    },
    // 5.关闭弹层
    hSuccess () {
      // (1)total加一 这里的total加一是为了 与服务器里面的最大total保持一致
      this.total++
      // (2) 记录最大的页码值
      const maxPage = Math.ceil(this.total / this.size)
      // (3) 改变添加时当前页的指向
      this.page = maxPage
      // (4)关闭弹层
      this.showDialog = false
      // (5)重新渲染
      this.loadEmployeeList()
    },
    // 6.删除员工
    async hDel (id) {
      this.$confirm('是否删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          // 优化删除最后一页不跳转
          if (this.list.length === 1) {
            this.page--
            // 优化第一页数据不能删除
            if (this.page <= 0) {
              this.page = 1
            }
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 发送删除请求
          try {
            await delEmployee(id)
          } catch (error) {
            console.log(error)
          }
          // 重新渲染
          this.loadEmployeeList()
        } catch (error) {
          console.log(error)
        }

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 7.重制表单
    hClose () {
      // (1) 清空表单
      // this.$refs.myEmp.resetForm()
    },
    // 8.导出员工的信息
    exportToExcel () {
      // 请求数据 --- this.list
      // 将请求的数据格式化excel所需要的数据
      const { tHeader, data } = formatToExcel(this.list)
      // import("")文件懒加载返回的promise实例对象
      // excel是一个模块的对象
      import('@/components/Export2Excel').then(excel => {
        // 表单的头部信息
        //const tHeader = ['Id', 'Title', 'Author', 'Readings', 'Date']
        // 表单内容信息
        // const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
        // const list = this.list
        // // 表单内容信息的格式化
        // const data = this.formatJson(filterVal, list)
        // const data = [
        //   [1, '三体', '刘慈欣', '100000', '2023-02-19']
        // ]
        // excel文件的导出
        excel.export_json_to_excel({
          // 表单头信息
          header: tHeader,
          // 格式化好的数据
          data: data,
          // 文件名
          filename: '',
          // 内容自适应
          autoWidth: true,
          // 导入文件的格式
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })

    },
    // 9.获取当前点击的员工的id
    hAssign (id) {
      // (1)打开弹层
      this.assignShowlosgin = true
      // (2)保存id
      this.currentId = id
    },
    // 10.关闭分配权限的弹层
    aSuccess () {
      this.assignShowlosgin = false
    },
    // 11.格式化时间
    // formatTime (t) {
    //   return dayjs(t).format('YYYY-MM-DD')
    // }
    showCode (url) {
      if (url) {
        this.showCodeDialog = true
        // 因为这个方法是异步的所以我们需要将她放入this.$nextTick()
        this.$nextTick(() => {
          QrCode.toCanvas(this.$refs.myCanvas, url)
        })
      } else {
        this.$message({
          type: 'warning',
          message: "图片生成失败"
        })
      }
    }

  }
}
</script>